<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="stylesheets/layui.css"  media="all">-->
    <!--<script src="javascripts/jquery-3.3.1.js"></script>-->
    <!--<script src="layui/layui.js" charset="utf-8"></script>-->
    <!--<script src="javascripts/echarts.js"></script>-->
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
    <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css"  media="all">
    <script src="https://hanlei.online/layui-v2.4.3/layui-v2.4.5/layui.js"></script>
    <style>
        .ziduan:hover{
            box-shadow:1px 2px 10px #01AAED; border:1px solid #9F9F9F;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<iframe width="99.5%" height="43px" src="uploadData.html" frameborder="no"></iframe>
<!--
<iframe width="200px" height="900px" src="leftNav.html"></iframe>
<iframe width="80%" height="900px" src="showData.html"></iframe>
-->

<!--左侧导航-->
<div style="width: 250px;height: 880px;float: left;border-right: 1px solid gainsboro;background-color:#eaeaea;">
    <ul class="layui-nav layui-nav-tree layui-inline layui-bg-gray" lay-filter="demo" style="margin-right: 10px;width: 250px">
        <li class="layui-nav-item layui-nav-itemed">
            <span>横轴</span>
            <button onclick="deleteLast(this)" title="删除" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon">-</i></button>
            <button onclick="openModak(this)" title="添加" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">+</i></button>
            <dl class="layui-nav-child">
                <dd class="ziduan"><a href="#">姓名</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <span>纵轴</span>
            <button onclick="deleteLast(this)" title="删除" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">-</i></button>
            <button onclick="openModak(this)" title="添加" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">+</i></button>
            <dl class="layui-nav-child">
                <dd class="ziduan"><a href="#">年龄</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <span>分组</span>
            <button onclick="deleteLast(this)" title="删除" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">-</i></button>
            <button onclick="openModak(this)" title="添加" style="float: right" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"><i class="layui-icon ">+</i></button>
            <dl class="layui-nav-child">

            </dl>
        </li>
    </ul>
    <!--模仿bootstrap的模态框-->
    <div id="motaikunag" style="display: none;">
        <div class="layui-col-md12">
            <div class="layui-card" style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;">
                <div class="layui-card-header">标题</div>

                <div class="layui-card-body">
                    <a href="#" onclick="selectZD(this)" style="display: block">字段1</a>
                </div>
                <div class="layui-card-body">
                    <a href="#" onclick="selectZD(this)" style="display: block">字段2</a>
                </div>
                <div class="layui-card-body">
                    <a href="#" onclick="selectZD(this)" style="display: block">字段3</a>
                </div>
                <div class="layui-card-body">
                    <a href="#" onclick="selectZD(this)" style="display: block">字段4</a>
                </div>
                <div class="layui-card-body">
                    <a href="#" onclick="selectZD(this)" style="display: block">字段5</a>
                </div>
                <div class="layui-card-body">
                    <a href="#" onclick="selectZD(this)" style="display: block">字段6</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        //全局 开启模态框的所属窗口
        var paren;
        //关闭模态框并传值
        function selectZD(name){
            var ZiDuan="<dd class=\"ziduan\"><a href=\"javascript:;\">"+name.innerHTML+"</a></dd>";
            $(paren).next().append(ZiDuan);
            layer.closeAll('page');  //page为layer的类型1
        }
        //删除最后一个字段
        function deleteLast(elem){
            //寻找dl中最后一个dd元素 并删除
            $(elem).next().next().children("dd:last").remove()
        }
        layui.use('element', function(){
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //监听导航点击
            element.on('nav(demo)', function(elem){
                //console.log(elem)
                layer.msg(elem.text());
            });
        });
        function openModak(name){
            paren=name;
            layui.use(['layer'],function () {
                var layer = layui.layer,$=layui.$;
                layer.open({
                    type:1,//类型
                    offset:['100px','200px'],//自定义位置
                    area:['200px','300px'],//定义宽和高
                    shade:[0],//父级窗口透明度
                    title:'添加字段',//题目
                    shadeClose:true,//点击遮罩层关闭  --点击外层关闭
                    content: $('#motaikunag')//打开的内容
                });
            })
        }
    </script>
</div>
<!--中间图表展示-->
<div style="width: 70%;height: 880px;float: left;">
    <script>
        function show() {
            option={title: {
                    text: '年龄比较',
                    x:'center'
                },
                legend: {
                    data: ['姓名'],
                    x:'right',
                    y:'top'
                },
                grid:{
                    left:'5%',
                    top:'5%',
                    bottom:'6%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                xAxis:{
                    type: 'category',
                    data: ['小白','小红','小黑'],
                    name:'姓名'
                },
                yAxis: {
                    type: 'value',
                    name:'年龄'
                },
                series: {
                    name:'姓名',
                    color:'#00B7FF',
                    type: 'bar',
                    data: [14,23,18]
                }};
            var charts =echarts.init(document.getElementById('a'));
            charts.setOption(option);
            /*
            $.get('/readData',function (data) {
                //data为拿到的数据
                data=JSON.parse(data);
                var option = {
                    title: {
                        text: '年龄比较',
                        x:'center'
                    },
                    legend: {
                        data: ['姓名'],
                        x:'right',
                        y:'top'
                    },
                    grid:{
                        left:'5%',
                        top:'5%',
                        bottom:'6%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    xAxis:{
                        type: 'category',
                        data: data.姓名,
                        name:'姓名'
                    },
                    yAxis: {
                        type: 'value',
                        name:'年龄'
                    },
                    series: {
                        name:'姓名',
                        color:'#00B7FF',
                        type: 'bar',
                        data: data.年龄
                    }
                };

                var charts =echarts.init(document.getElementById('a'));
                charts.setOption(option);
            });*/
        }
    </script>
    <button id="start11" onclick="show()">绘图</button>
    <div id="a" style="width: 100%;height: 880px;" class="layui-main"></div>
</div>
<div style="width: 16%;height: 880px;float: left;background:#fff9ec;">
    
</div>
</body>
</html>